<template>
	<div>
		<!-- 卡片区域 -->
		<el-card class="box-card">
			<!-- 购物车商品列表 -->
			<el-table :data="goodcarlist" border>
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column label="商家姓名" prop="seller_name"></el-table-column>
				<el-table-column label="购物车商品" prop="good_name"></el-table-column>
				<el-table-column label="购买数量">
					<template v-slot="scope">
						<!-- 修改购物车商品数量 -->
						<el-input-number id="goodCarNum" v-model="scope.row.buy_good_num" @change="updateNum(arguments, scope.row.id)" size="small"></el-input-number>
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template v-slot="scope">
						<el-checkbox  @change="updateStatus($event, scope.row.id)"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<!-- 功能按钮 -->
					<template v-slot="scope">
						<el-button type="danger" icon="el-icon-delete" @click="showDeleteDialog(scope.row.id)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query_info.page"
			 :page-sizes="[1, 2, 5, 10]" :page-size="query_info.page_size" layout="total, sizes, prev, pager, next, jumper"
			 :total="list_count">
			</el-pagination>
			<!-- 选择地址 -->
			<el-select v-model="address" placeholder="别忘了选择你的地址地址">
			    <el-option
			      v-for="item in options"
			      :key="item.id"
			      :label="item.address"
			      :value="item.address">
			    </el-option>
			  </el-select>
			  
			<el-button type="primary" @click="toOrder()" class="suborder">提交订单</el-button>

			<!-- 删除购物车商品对话框 -->
			<el-dialog title="删除购物车商品" :visible.sync="deleteDialogVisible" width="30%">
				<span>确定删除购物车商品吗？</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="deleteDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="deleteDialogVisible = false;deletegoodcar()">确 定</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	// import $ from 'jquery'
	export default {
		data() {
			return {
				address: "",
				options: "",
				goodCarNum: "",
				checked: true,
				deleteDialogVisible: false,
				goodcarId: -1,
				query_info: {
					"token": window.sessionStorage.getItem("token"),
					"page": 1,
					// 这里的page_size的值要与上文中列表中可选值一致
					"page_size": 5,
					"query": ""
				},
				goodcarlist: [],
				list_count: 0,
				editForm: {
					"buy_good_num": 1,
					"is_select": ""
				}
			}
		},
		created() {
			this.getgoodcarlist();
			this.getaddress();
		},
		methods: {
			async getgoodcarlist() {
				const {
					data: res
				} = await this.$http.get('goodcarapi/operation/list/', {
					params: this.query_info
				});
				// console.log(res);
				this.goodcarlist = res.results;
				this.list_count = res.count;
			},
			handleSizeChange(newPageSize) {
				this.query_info.page_size = newPageSize;
				this.getgoodcarlist();
			},
			handleCurrentChange(current_page) {
				this.query_info.page = current_page;
				this.getgoodcarlist();
			},
			showDeleteDialog(id){
				this.deleteDialogVisible = true;
				this.goodcarId = id;
			},
			async deletegoodcar(){
				let url = "goodcarapi/operation/" + this.goodcarId +"/?token=" + window.sessionStorage.getItem("token");
				const {
					data: res
				} = await this.$http.delete(url);
				if(!res){
					this.$message.success("删除购物车商品成功");
					this.query_info.page = 1;
					this.getgoodcarlist();
				}else {
					this.$message.error("删除购物车商品失败");
				}
			},
			async updateStatus(e, id){
				let status = 0;
				if(e){
					status = 1;
				}
				let url = "goodcarapi/operation/" + id +"/?token=" + window.sessionStorage.getItem("token");
				let data = new FormData();
				data.append('is_select', status);
				const {
					data: res
				} = await this.$http.patch(url, data);
				// console.log(res);
				if(res.id){
					this.getgoodcarlist();
				}else {
					this.$message.error("选中失败");
				}
			},
			async updateNum(args, id) {
				let [current, old] = args;
				let url = "goodcarapi/operation/" + id +"/?token=" + window.sessionStorage.getItem("token");
				let data = new FormData();
				data.append('buy_good_num', current);
				const {
					data: res
				} = await this.$http.patch(url, data);
				// console.log(res);
				if(res.id){
					this.getgoodcarlist();
				}else {
					this.getgoodcarlist();
					this.$message.error("不能买这么多");
				}
			},
			getaddress() {
				let url = 'addressapi/operation/list/?token=' + window.sessionStorage.getItem("token");
				this.$http.get(url).then(res => {
					let data = res.data;
					this.options = data.results;
				}).catch(res => {
					this.$message.error("获取地址失败");
				})
			},
			toOrder() {
				let url = 'orderapi/operation/?token=' + window.sessionStorage.getItem("token");
				let data = new FormData();
				data.append('u_id', window.sessionStorage.getItem("u_id"));
				data.append('order_address', this.address);
				this.$http.post(url, data).then(res => {
					// console.log(res);
				}).catch(res => {
					this.$message.error("提交订单失败");
				})	
				this.$router.push("/buyer/order");
			}
			
		}
	}
</script>

<style lang="less" scoped="scoped">
	.el-breadcrumb {
		font-size: 0.75rem;
		margin-bottom: 0.9375rem;
	}
	.suborder {
		float: right;
		margin-bottom: 0.9375rem;
	}
</style>
